<template>
    <div>
        <el-dialog
                :title="isEdit ? '编辑' : '新增'"
                :visible.sync="dialogVisible"
                width="50%"
                :before-close="handleClose">
            <el-form v-if="!isEdit" label-position="left" :rules="formRules.departmentFrom" ref="departmentForm"
                     label-width="80px">
                <el-form-item label="学院名称" prop="deptName">
                    <template>
                        <el-select v-model="majorForm.departmentid" placeholder="学院名称">
                            <el-option
                                    v-for="item in options"
                                    :key="item.value"
                                    :label="item.departmentname"
                                    :value="item.departmentid">
                            </el-option>
                        </el-select>
                    </template>
                </el-form-item>
                <el-form-item label="专业名称">
                    <el-input v-model="majorForm.majorname"/>
                </el-form-item>
            </el-form>
            <el-form v-else label-position="left" :rules="formRules.departmentFrom" ref="departmentForm"
                     label-width="80px">
                <el-form-item label="学院名称" prop="deptName">
                    <template>
                        <el-select v-model="departmentData.departmentid" placeholder="学院名称" disabled>
                            <el-option
                                    v-for="item in options"
                                    :key="item.value"
                                    :label="item.departmentname"
                                    :value="item.departmentid">
                            </el-option>
                        </el-select>
                    </template>
                </el-form-item>
                <el-form-item label="专业名称">
                    <el-input v-model="departmentData.majorname"/>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
				<el-button @click="handleClose">取 消</el-button>
    		<el-button type="primary" @click="onSubmit" v-loading="loading">确 定</el-button>
  		</span>
        </el-dialog>
    </div>
</template>

<script>
    import * as majorManage from '@/api/majorManage';
    import * as college from '@/api/college';

    export default {
        name: 'addDialog',
        props: {
            dialogVisible: {
                type: Boolean,
                default: false
            },
            isEdit: {
                type: Boolean
            },
            departmentData: {
                type: Object,
                default: {}
            }
        },
        data() {
            return {
                loading: false,
                majorForm: {
                    departmentid: '',
                    majorname: ''
                },
                options: []
            }
        },
        methods: {
            onSubmit() {
                if (this.isEdit) {
                    this.onEditDepartmentForm()
                } else {
                    this.onAddDepartment();
                }
            },
            async onAddDepartment() {
                try {
                    this.loading = true;
                    await majorManage.addDepartment(this.majorForm);
                    this.handleFresh();
                    this.handleClose();
                } catch (e) {
                    this.$notify({
                        title: '错误',
                        type: 'error',
                        message: '添加失败!'
                    });
                    console.log(e)
                } finally {
                    this.loading = false;
                }
            },
            async onEditDepartmentForm() {
                try {
                    this.loading = true;
                    await majorManage.editDepartment(this.departmentData);
                    this.$notify({
                        title: '信息',
                        type: 'success',
                        message: '修改成功!'
                    });
                    this.handleFresh();
                    this.handleClose();
                } catch (e) {
                    console.log(e);
                    this.$notify({
                        title: '错误',
                        type: 'error',
                        message: '修改失败!'
                    });
                } finally {
                    this.loading = false
                }
            },
            async getCollege() {
                const res = await college.fetchUserList()
                this.options = res.msg
            },
            handleClose() {
                this.$emit('closeDialog');
            },
            handleFresh() {
                this.$emit('fresh');
            }
        },
        watch: {
            dialogVisible(newVal, oldVal) {
                if (newVal) {
                    if (!this.isEdit) {
                        this.majorForm = {
                            departmentid: '',
                            majorname: ''
                        }
                    }
                }
            }
        },
        created() {
            this.majorForm = {
                departmentid: '',
                majorname: ''
            },
                this.getCollege()
        }
    }
</script>

<style scoped>

</style>